<!-- 工作台 -->
<template>
    <div >
        <a-card title="待办事项" >
            <a v-if="list.length > 8" slot="extra" href="javascript:void(0)" @click="isMore">{{more ? '收起' : '展开更多'}}</a>
            <div style="cardWrap">
                <a-card-grid v-for="item in dataList" :key="item.todoId" style="width:25%;text-align:left;height: 170px" @click="goNext(item)">
                    <div class="title">{{item.title}}</div>
                    <div class="amount">{{item.todoType == '1' ? '结算' : '发票'}}单金额：{{item.amount}}（元）。</div>
                    <div class="desc">{{item.createTime}}</div>
                </a-card-grid>
            </div>
        </a-card>
    </div>
</template>

<script>
import { getUserTodo } from '@/api/system';
export default {
    data () {
        return {
            dataList: [], // 代办事项列表
            list: [1,2,3,4,5,6,7,8,9,10,11,12,13],
            more: false,
        };
    },
    created(){
        // this.dataList = this.list.slice(0,8)
        this.getData();
    },
    methods: {
        isMore(){
            this.more = !this.more
            if(this.more){
                this.dataList = this.list;
            }else{
                this.dataList = this.list.slice(0,8)
            }
        },
        getData(){
            let _this = this;
            getUserTodo()
            .then(res => {
                if(res.success){
                    _this.list = res.data;
                    if(res.data.length > 8){
                        _this.dataList = _this.list.slice(0,8)
                    }else{
                        _this.dataList = _this.list;
                    }
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 跳转
        goNext(item){
            if(item.todoType == '1'){
                this.$router.push({ path: '/servicesSettlement/settlement'});
            }else if(item.todoType == '2'){
                this.$router.push({ path: '/servicesInvoice/invoiceList'});
            }
        },
    }
}

</script>
<style scoped>
.cardWrap{
    display: flex;
    flex-wrap: wrap;
}
.title{
    font-size: 18px;
    font-weight: 500s;
    color: #333333;
    margin-bottom: 10px;
}
.amount{
    font-size: 16px;
    color: #666666;
}
.desc{
    font-size: 14px;
    color: #999999;
}
</style>